<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-17 23:47:58
 * @LastEditTime: 2024-06-18 12:18:10
-->
<script lang="ts" setup>
import { ref } from "vue";
import { IconTooltip } from "@/components/SvgIcon";
import screenfull from "screenfull"; //全屏组件  cnpm i screenfull -S
//全屏按钮
const isFullscreen = ref(false);
const screenfullChange = () => {
  if (!screenfull.isEnabled) {
    alert("抱歉！您的浏览器版本过低，不支持全屏浏览。");
    return false;
  }
  screenfull.toggle();
  isFullscreen.value = !isFullscreen.value;
};
</script>
<template>
  <IconTooltip
    :onClick="screenfullChange"
    :tooltipTitle="isFullscreen ? $t(`tooltip.fullNo`) : $t(`tooltip.full`)"
    :icon="isFullscreen ? 'tuichuquanping' : 'quanpingxianshi'"
  >
  </IconTooltip>
</template>
<style lang="scss" scoped></style>
